<template>
	<view >
		<view class="top u-flex">
			<view class="u-flex-6 u-m-l-20 u-m-r-20">
				<u-image width="250rpx" height="250rpx" :src="poster" shape="square" border-radius="20"></u-image>
			</view>
			
			<view class="">
				{{book.name}}
			</view>
		</view>
		<view class="u-m-l-20 u-m-r-20">
			<view class="curPlay u-m-t-20 u-text-center">
				正在播放
			</view>
			<view class="audioPlay">
				<wxy-audio :src="src " :poster="poster" :name="name ? name : '请选择音频' "  :play.sync="audioPlay"></wxy-audio>
			</view>
			
			<view class="u-m-t-20">
				<view class="u-text-center" style="font-size: 30rpx; color: #303133; font-weight: bolder;">
					播放列表<text style="font-size: 20rpx;color: #909399;">({{audioList.length}})</text>
				</view>
				<view class="u-m-t-20">
					<view v-for="(item,index) in audioList">
						<view class="item u-flex " @click="toChange(index)">
							<view class="u-flex-1 u-text-center" style="color:#909399 ;">{{index + 1}}</view>
							<view class="u-flex-6 u-line-1">{{item.file.fileName}}</view>
							<view class="u-flex-1 u-text-center  u-m-t-10"><u-icon name="play-circle" color="#909399" size="40"></u-icon></view>
						</view>
						
					</view>
				</view>
			</view>
			
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bid:0,
				book:{},
				audioList:[],
				audioPlay:false,
				src:'',
				name:'',
				poster:'',
			}
		},
		onLoad(val) {
			
			this.bid = val.id
			this.getaudio()
		},
		methods: {
			toChange(val){
				let obj = this.audioList[val]
				this.src = this.vuex_user.store + obj.file.store
				this.name = obj.file.fileName + obj.id
				setTimeout(()=>{
					this.audioPlay = true
				},1000)
				
			},
			async getaudio(){
				const res = await this.$u.api.getAudio(this.bid)
				this.audioList = res.audios
				this.book = res.book
				
				this.poster = this.vuex_user.store +  this.book.img
				console.log(res)
			}
		}
	}
</script>

<style>
	.top{
		clear: inherit;
		width: 100%;
		height: 300rpx;
		background-color: #fdf6ec;
	}
	.curPlay{
		width: 200rpx;
		height: 80rpx;
		background-color: #fcbd71;
		font-size: 35rpx;
		color: #FFFFFF;
		line-height: 70rpx;
		
	}
	.audioPlay{
		border: 1rpx solid #fcbd71;
	}
	.item{
		margin-bottom: 10rpx;
		border-radius: 20rpx;
		box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
		height: 100rpx;
	}
</style>
